<template name="myTodoItem">
	<view class="todo-item"  @longpress="longPress">
		<view class="todo-info-above">
			<uni-icons type="calendar" size="25"></uni-icons>
			<view class="content" v-if="!ifShowInput"  @click="showDescription">{{todoItem.description}}</view>
			<input v-else focus auto-blur="true" adjust-position="true" focus @blur="blurEvent"
				:placeholder="todoItem.description" />
			<uni-icons type="trash" size="25" @click="deleteTodoHandler"></uni-icons>
		</view>

		<view class="todo-indo-under">
			<view class="left">
				<text>创建时间:{{todoItem.createTime | formatTime}}</text>
				<br />
				<text>更新时间:{{todoItem.updateTime | formatTime}}</text>
			</view>
			<view class="right">
				<text>完成状态：</text>
				<br />
				<text v-if="todoItem.status===1" style="color: green;">已完成</text>
				<text v-else style="color: #C00000;">未完成</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: "myTodoItem",
		props: {

			todoItem: {
				type: Object,
				/*示例
				{
				    "taskId": 1,
				    "realStudentId": "202225220503",
				    "description": "完成Java实验任务",
				    "status": 0,
				    "createTime": "2023-11-05T21:36:43",
				    "updateTime": "2023-11-05T21:36:43"
				},
				*/
			}
		},

		data() {
			return {
				ifShowInput: false
			};
		},

		methods: {
			deleteTodoHandler() {
				this.$emit('delete-Todo', {
					taskId: this.todoItem.taskId
				})
			},
			longPress() {
				if(this.todoItem.status===1){
					return uni.showModal({
						title:'修改待办',
						content:'该待办已完成！不可修改',
					})
				}
				this.ifShowInput = true
			},

			changeInput() {
				this.ifShowInput = false
			},

			blurEvent(e) {
				this.$emit('getInput', {
					taskId: this.todoItem.taskId,
					newDescription: e.detail.value
				})
				this.changeInput()
			},
			
			showDescription(){
				this.$emit('showDescription',this.todoItem.description)
			}
		},


		filters: {
			formatTime(time) {
				return time.split('T')[0] + '    ' + time.split('T')[1]
			}
		}
	}
</script>
<style lang="scss">
	.todo-item {
		.todo-info-above {
			width: 100%;
			justify-content: space-between;
			display: flex;
			font-size: 22px;
			
			.content{
				width: 80%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.todo-indo-under {
			padding-top: 10px;
			display: flex;
			width: 100%;
			justify-content: space-between;

			.left {
				white-space: pre;
				padding-right: 5px;
				width: 70%;
				border-right: solid 3px #efefef;
			}

			.right {
				padding-left: 5px;
				text-align: center;
				width: 30%;
			}
		}
	}
</style>